/**
 * 登录
 * **/
import Login from '../../layouts/Login/index'
import './index.scss'
import store from '../../store/rabbit'
import { useState } from 'react'
import { SafetyCertificateOutlined, MailTwoTone, UserOutlined, LockOutlined, ExclamationOutlined } from '@ant-design/icons'
import { Form, Input, Button, Checkbox, message } from 'antd'
import { accountLogin, notesLogin } from '../../api/login'
import { useNavigate } from 'react-router-dom'
export default () => {
    const nav = useNavigate()
    /**
     * 切换账号登陆扫码登陆方式
     * **/
    const [curLogin, setCurLogin] = useState(true)
    /**
     * 切换密码登录短信登陆
     * **/
    const [curCodeLogin, setCodeLogin] = useState(false)
    /**
     * loading
     * **/
    const [loading, setLoading] = useState(false)
    /**
     * 手机号正则
     * **/
    const tel=(_, value)=>{
       let phone= /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/
       if(!value) return Promise.reject(new Error('手机号不能为空'))
       if(phone.test(value)){
        return Promise.resolve();
       }else{
        return Promise.reject(new Error('手机号格式不正确'));
       }
    }
    /**
     *用账号登录按钮
     ***/
    const confirm = async (values) => {
        if (loading) {
            return
        }
        try {
            setLoading(true)
            const user = await accountLogin(values)
            store.setRabbit(user)
            message.success('登陆成功')
            nav('/')
        } catch (error) { }
        setLoading(false)
    }
    /**
     * 用手机号登录
     * **/
    const telLogin = async (values) => {
        try {
            setLoading(true)
            const { message: msg } = await notesLogin(values)
            message.error(msg)
        } catch (error) { }
        setLoading(false)
    }

    /**
     * 账号密码登录
     * **/
    const userLogin = (
        <>
            <Form.Item name="account" rules={[{ required: true, message: '用户名不能为空' }, { max: 20, min: 2, message: '用户名2~20字符' }]}>
                <Input placeholder='请输入用户名' maxLength={20} size='large' addonBefore={<UserOutlined />}></Input>
            </Form.Item>
            <Form.Item name="password" rules={[{ required: true, message: '密码不能为空' }, { max: 20, min: 6, message: '密码6~20字符' }]}>
                <Input.Password placeholder='请输入密码' maxLength={20} size='large' addonBefore={<LockOutlined />}></Input.Password>
            </Form.Item>
        </>
    )
    /**
     * 短信登录
     * **/
    const noteLogin = (
        <>
            <Form.Item name="mobile" rules={[{ required: true,validator:tel } ]}>
                <Input placeholder='请输入手机号' maxLength={11} size='large' addonBefore={<UserOutlined />}></Input>
            </Form.Item>
            <Form.Item name="code" rules={[{ required: true, message: '验证码不能为空' }, { max: 6, min: 6, message: '验证码格式不正确' }]}>
                <Input addonAfter="发送验证码" maxLength={6} placeholder='请输入验证码' size='large' addonBefore={<SafetyCertificateOutlined />}></Input>
            </Form.Item>
        </>
    )

    /**
     * 账户登录
     * **/
    const account = (
        <div className="user">
            <div className="login-note" onClick={() => setCodeLogin(v => !v)}>
                {curCodeLogin ? <><UserOutlined />&ensp;使用账号登陆</> : <><MailTwoTone />&ensp;使用短信登录</>}
            </div>
            <Form className='form' onFinish={values => curCodeLogin ? telLogin(values) : confirm(values)} initialValues={{ account: 'xiaotuxian001', password: '123456' }}>
                {!curCodeLogin ? userLogin : noteLogin}
                <Form.Item name="agreement"
                    valuePropName="checked"
                    rules={[
                        {
                            validator: (_, value) =>
                                value ? Promise.resolve() : Promise.reject(new Error('！请勾选登录协议')),
                        },
                      
                    ]}
                ><Checkbox>我已同意<a>《隐私条款》</a>和<a>《服务条款》</a></Checkbox></Form.Item>
                <Button htmlType="submit" loading={loading} size='large' block type="primary" style={{ background: '#27ba9b' }}>登录</Button>
                <div className="foot">
                    <img src={require('../../assets/Connect_logo_7.png')} alt="" />
                    <div>
                        <a href="#">忘记密码</a>
                        <a href="#">免费注册</a>
                    </div>
                </div>
            </Form>
        </div>
    )
    /**
     * 扫码登陆
     * **/
    const code = (
        <div className='code'>
            <img src={require('../../assets/Snipaste_2022-05-09_19-48-24.png')} alt="" />
            <p>打开<a href="#">小兔鲜APP</a>扫码登陆</p>
        </div>
    )

    return (
        <div className='login-wrap'>
            <Login title="欢迎登陆">
                <div className='login-box'>
                    <div className="login-user">
                        <h3 onClick={() => setCurLogin(true)} className={curLogin ? 'active' : ''}>账户登录</h3>
                        <h3 onClick={() => setCurLogin(false)} className={!curLogin ? 'active' : ''}>扫码登录</h3>
                    </div>
                    <div>{curLogin ? account : code}</div>
                </div>
            </Login>
        </div>
    )
}